<template>
	<view class="container">
		<view class="nameInput">
			请选择证件类型
			<!-- <select name="" class="cardSel" @change='selectCard'>
				<option v-for="(v,i) in range" :key="v.value" value="v.value">{{v.text}}</option>
			</select> -->
			 <uni-data-select
			      v-model="value"
			      :localdata="range"
			      @change="change"
			    ></uni-data-select>
		</view>
		<view class="nameInput">
			请输入真实姓名<input type="text">
		</view>
		<view class="nameInput">
			请输入证件号<input type="number">
		</view>
		<view class="upload">

			<view class="upload-title">
				请上传证件相关材料
			</view>
			<view class="grey">*材料用于物业管理后台人员审核，请确保图片清晰无光斑，边框完整，拍摄背景干净</view>
			<view class="idCard" @click="uploadFun">
				<img src="/static/IDcard1.jpg" alt="">
				<view class="material">材料1</view>
			</view>
			<view class="idCard">
				<img src="/static/IDcard2.jpg" alt="">
				<view class="material">材料2</view>
			</view>
			<button style="background-color: #128ee8;color:white;margin-top: 45rpx;">下一步</button>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [{
						value: 0,
						text: '身份证'
					},
					{
						value: 1,
						text: '暂住证'
					},
					{
						value: 2,
						text: '户口簿'
 					},
					{
						value: 3,
						text: '军官证'
					},
					{
						value: 4,
						text: '警官证'
					},
					{
						value: 5,
						text: '士兵证'
					},
					{
						value: 6,
						text: '护照'
					},
					{
						value: 7,
						text: '驾照'
					},
					{
						value: 8,
						text: '工商营业执照'
					},
					{
						value: 9,
						text: '其他证件'
					}
				],
				value: 0
			};
		},
		methods: {
			// 上传证件照片
			uploadFun() {
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					success(res) {
						const tempFiles = res.tempFiles[0]
						console.log(tempFiles);
					}
				})
				// #endif
				// #ifdef H5
				uni.chooseFile({
					count: 1,
					type: 'all',
					success(res) {
						console.log(res);
						const tempFilePaths = res.tempFiles; //.path拿到文件路径
					}
				})
				// #endif
			},
			change(e){
				console.log(e);
			},
			selectCard(e){
				console.log(e);
			}
		},

	}
</script>

<style lang="less">
	.container {
		font-size: 28rpx;
	}
	.nameInput {
		width: 95%;
		margin: auto;
		height: 100rpx;
		border-bottom: solid 1px #ccc;
		display: flex;
		align-items: center;
		.cardSel{
			margin-left: 5px;
			flex: 1;
			border: none;
		}
		uni-data-select{
			width: 95%;
			margin: auto;
		}
	}

	.upload {
		width: 95%;
		margin: auto;

		.upload-title {
			margin-top: 40rpx;
		}
	}

	.grey {
		display: block;
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.idCard {
		width: 100%;
		margin-top: 60rpx;

		img {
			width: 100%;
			height: 400rpx;
		}
	}

	.material {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.next {
		width: 100%;
		height: 80rpx;
		background: lightskyblue;
		color: white;
		margin-bottom: 10px;
	}
</style>